<template>
  <view class="list-card">
    <view
      class="list-con"
      v-for="(item, index) in listConf"
      :key="index"
      @click="toUrl(item.url, item.id)"
    >
      <template v-if="item.url">
        <image :src="item.icon" style="width: 48rpx; height: 48rpx"></image>
        <view class="list-item">
          <view class="item-left">
            <text class="item-title">{{ item.title }}</text>
            <view class="item-tag" v-if="item.id == 1 && info.realname != 2"
              >展示实名标识</view
            >
          </view>
          <text class="item-text">{{
            item.id == 1 && info.realname == 2 ? "已实名" : item.text
          }}</text>
        </view>
        <uni-icons type="right" color="#c1c1c1" size="16"></uni-icons>
      </template>
      <button open-type="share" id="recommend" v-else>
        <image :src="item.icon" style="width: 48rpx; height: 48rpx"></image>
        <view class="list-item">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-text">{{ item.text }}</text>
        </view>
        <uni-icons type="right" color="#c1c1c1" size="16"></uni-icons>
      </button>
    </view>
  </view>
</template>

<script setup>
import listIcon1 from "@/static/my/list1.png";
import listIcon2 from "@/static/my/list2.svg";
import listIcon3 from "@/static/my/list3.svg";
import listIcon4 from "@/static/my/list4.png";
import useStore from "@/store";
const { common } = useStore();

const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});
const listConf = reactive([
  {
    id: 1,
    icon: listIcon4,
    title: "实名认证",
    text: "提高资料吸引力",
    url: "/subPages/realname/index",
  },

  {
    id: 2,
    icon: listIcon1,
    title: "联系管家",
    text: "任何使用问题，全力解决",
    url: "/subPages/serve/index",
  },
  {
    id: 3,
    icon: listIcon2,
    title: "推荐给好友",
    text: "手有余香",
  },
  {
    id: 4,
    icon: listIcon3,
    title: "设置",
    url: "/subPages/settings/index",
  },
]);

const toUrl = (url, id) => {
  const { appLogin, phone } = props.info;

  if (!url) return;
  if ([1, 4].includes(id)) {
    if (!appLogin) {
      uni.navigateTo({ url: "/subPages/register/index" });
      return;
    }
    if (!phone) {
      const data = {
        title: "您还未登记联系方式",
        content: "其他亲家无法联系您",
        btnText: "立即登记",
        handleFn: () => {
          common.updatePopupOpen(false, "prompt");
          setTimeout(() => {
            uni.navigateTo({ url: "/subPages/register/contact" });
          }, 100);
        },
      };
      common.updatePromptParams(data);
      common.updatePopupOpen(true, "prompt");
      return;
    }
  }
  if (url) uni.navigateTo({ url });
};
</script>

<style lang="scss" scoped>
.list-card {
  margin: 20rpx;
  border-radius: 30rpx;
  overflow: hidden;
  background: #fff;
  padding: 0 30rpx;
  margin-bottom: 0;
  .list-con {
    border-bottom: 1rpx solid #e6e6e6;
    @include flexAlignCenter;
    justify-content: space-between;
    padding: 34rpx 0;
    .list-item {
      flex: 1;
      @include flexAlignCenter;
      justify-content: space-between;
      margin-right: 10rpx;
      .item-left {
        @include flexAlignCenter;
      }

      .item-tag {
        font-size: 24rpx;
        color: #fff;
        background: #64b748;
        border-radius: 100rpx;
        padding: 5rpx 18rpx;
        margin-left: 10rpx;
      }
    }
    .item-title {
      color: #333;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 10rpx;
    }
    .item-text {
      font-weight: 400;
      font-size: 28rpx;
      color: #999999;
    }
    &:last-child {
      border: none;
    }
  }
}

button {
  background-color: #fff;
}
</style>
